
import React from "react";
import { MCateDesp } from '../../components/page/onlinehelp'

import 'antd/dist/antd.css';
import scss from '../../assets/styles/cloudmap.module.scss';

let { cateContent } = require('./data')


interface State {
    area: number;
    PageAddItem: any;
}
interface Props {

}
export default class OnLineHelpPage extends React.Component<Props, State> {
    constructor(props: Props) {
        super(props)
        this.state = {
            area: 8,
            PageAddItem: {}
        }
    }
    componentWillMount() {
        let Item = cateContent;
        let set: any = {};
        Item.forEach((element: any) => {
            if (element.type === 0) {
                set[element.key] = element.component;
            }
            else {
                element.data.forEach((element1: any) => {
                    set[element1.key] = element1.component;
                })
            }
        });
        this.setState({
            area: Item[0].key,
            PageAddItem: set
        })
    }
    // 列表点击事件
    clickCounter = (id: any, value: any, key: any) => {
        // 展示
        if (value === 0) {
            this.setState({
                area: key
            })
        }
        else {
            cateContent[id].status = !cateContent[id].status;
            this.setState({});
        }
    }

    // 页面数据更新
    get pageElements() {
        const { area, PageAddItem } = this.state;
        return PageAddItem[area];
    };

    render() {
        let PageElements = this.pageElements;
        return (
            <>
                <div className={scss['cloud-help-navigation']}>
                    <MCateDesp
                        clouditemList={cateContent}
                        clickCounter={(id, value, key) => this.clickCounter(id, value, key)}
                    />
                </div>
                <div className={scss['cloud-help-item']}>
                    <PageElements />
                </div>
            </>

        )
    }
}